<template>
  <a-layout>
    <a-layout-header></a-layout-header>

    <a-layout>
      <a-layout-sider>
        <a-menu mode="inline">
          <a-menu-item key="1">
            <template #icon>
              <PieChartOutlined />
            </template>
            <span>项目架构</span>
          </a-menu-item>
          <a-menu-item key="2">
            <template #icon>
              <DesktopOutlined />
            </template>
            <span>万达集团</span>
          </a-menu-item>
          <a-sub-menu key="sub1">
            <template #icon>
              <MailOutlined />
            </template>
            <template #title>万达实业建筑有限公司</template>
            <a-menu-item key="5" style="background-color: white; padding: 0; margin: 0" @click="getdata">项目1</a-menu-item>
            <a-menu-item key="6" style="background-color: white; padding: 0; margin: 0"
              @click="getdatax">项目2</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>

      <a-layout-content style="margin-bottom: 20px">
        <div class="itemm">项目管理</div>
        <div class="tops">
          <div class="s1">
            <span>搜索</span>
            <a-input v-model:value="myvalue" allowClear placeholder="请输入项目名称/总承包单位/联系人姓名/联系手机" />
          </div>
          <div class="s2">
            <span>项目分类</span>
            <el-select v-model="valuez" class="m-2" size="default" placeholder="--请选择--">
              <el-option v-for="item in options" :key="item.valuex" :label="item.label" :value="item.valuex" />
            </el-select>
          </div>
          <div class="s3">
            <span>状态</span>
            <el-select v-model="valuey" class="m-2" size="default" placeholder="--请选择--">
              <el-option clearable v-for="item in options1" :key="item.valuey" :label="item.labely"
                :value="item.valuey" />
            </el-select>
          </div>
        </div>

        <div class="block">
          <span class="sp">在建日期</span>
          <div class="b1">
            <el-date-picker clearable v-model="value1" type="date" placeholder="Pick a day" :disabled-date="disabledDate"
              :shortcuts="shortcuts" :size="size" />
            ~~
            <el-date-picker clearable v-model="value2" type="date" placeholder="Pick a day" :disabled-date="disabledDate"
              :shortcuts="shortcuts" :size="size" />
          </div>
          <div class="b2">
            <a-button type="primary" style="background-color: green;" @click="search">搜索</a-button>
          </div>
        </div>

        <!-- 表格 -->
        <div>
          <el-table :header-cell-style="{ backgroundColor: 'rgb(242,242,242)' }"
            :data="tableData.slice((page - 1) * limit, page * limit)" border
            style="width: 98%;height: 300px; margin:auto;margin-top: 20px;font-size: 12px;color: black;text-align: center;">
            <el-table-column prop="num" label="序号" width="100" type="index">
              <template #default="scope">
                <span>{{ (page - 1) * limit + scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="项目编号" width="100" />
            <el-table-column prop="address" label="项目名称" />
            <el-table-column prop="cname" label="总承包单位名称" width="120" />
            <el-table-column prop="classify" label="项目分类" width="100" />
            <el-table-column prop="addresser" label="联系人姓名" />
            <el-table-column prop="phone" label="联系手机" width="100" />
            <el-table-column prop="state" label="项目状态" width="100" />
            <el-table-column prop="begin" label="开工日期" />
            <el-table-column prop="end" label="竣工日期" />
            <el-table-column prop="operate" label="操作">
              <template #default="scope">
                <button @click="jump(scope.row.num)">{{ scope.row.operate }}</button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class=" dpage">
          <el-pagination background @current-change="changepage" v-model:current-page="currentpage"
            layout="prev, pager, next" :total="tableData.length / 2 * 10" />
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, watch } from "vue";
import dayjs, { Dayjs } from "dayjs";
import service from "../../utils/service"
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
} from "@ant-design/icons-vue";
import { string } from "vue-types";
import { useRouter } from "vue-router";
const $router = useRouter();

const state = reactive({
  collapsed: false,
  selectedKeys: ["1"],
  openKeys: ["sub1"],
  preOpenKeys: ["sub1"],
});

watch(
  () => state.openKeys,
  (_val, oldVal) => {
    state.preOpenKeys = oldVal;
  }
);
const toggleCollapsed = () => {
  state.collapsed = !state.collapsed;
  state.openKeys = state.collapsed ? [] : state.preOpenKeys;
};


let valuez = ref<string>();
console.log(valuez
);

// 项目分类数据
const options = [
  {
    valuex: "--请选择--",
    label: "--请选择--",
  },
  {
    valuex: "房屋建设工程",
    label: "房屋建筑工程",
  },
  {
    valuex: "市政公用工程",
    label: "市政公用工程",
  },
  {
    valuex: "机电安装工程",
    label: "机电安装工程",
  },
  {
    valuex: "铁路工程",
    label: "铁路工程",
  },
  {
    valuex: "公路工程",
    label: "公路工程",
  },
  {
    valuex: "港口与航道工程",
    label: "港口与航道工程",
  },
  {
    valuex: "水利水电工程",
    label: "水利水电工程",
  },
  {
    valuex: "电子工程",
    label: "电子工程",
  },
  {
    valuex: "矿山工程",
    label: "矿山工程",
  },
  {
    valuex: "冶炼工程",
    label: "冶炼工程",
  },
  {
    valuex: "化工石油工程",
    label: "化工石油工程",
  },
  {
    valuex: "通信工程",
    label: "通信工程",
  },
  {
    valuex: "其他",
    label: "其他",
  }
];

// 状态数据
let valuey = ref<string>();
const options1 = [
  {
    valuey: "--请选择--",
    labely: "--请选择--"
  },
  {
    valuey: "筹建",
    labely: "筹建"
  },
  {
    valuey: "在建",
    labely: "在建"
  },
  {
    valuey: "完工",
    labely: "完工"
  },
  {
    valuey: "停工",
    labely: "停工"
  },
]
// 时间下拉框
const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('2015-01-23')
const value2 = ref('2015-05-12')

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}

//  表格
interface mytable {
  num: number;
  name: number;
  address: string;
  cname: string;
  classify: string;
  addresser: string;
  phone: number;
  state: string;
  begin: string;
  end: string;
  operate: string
}
const tableData = reactive<mytable[]>([])
let count = ref()
const getdata = () => {
  service({
    url: "projectx",
    method: "get"
  }
  ).then((res) => {
    count.value = res.data.length
    console.log(count.value);
    tableData.length = 0
    tableData.push(...res.data)
  })
}
getdata();

const getdatax = () => {
  service({
    url: "projecty",
    method: "get"
  }
  ).then((res) => {
    count.value = res.data.length
    console.log(count.value);
    tableData.length = 0
    tableData.push(...res.data)
  })
}

let myvalue = ref<string>("请输入");

// 搜索
const search = () => {
  service({
    url: "http://localhost:3000/projectx?q=" + myvalue.value,
    method: "get",
    params: {
      "classify": valuez.value,
      "state": valuey.value,
      "begin": value1.value,
      "end": value2.value
    }
  }).then((res) => {
    valuez.value = undefined,
      valuey.value = undefined,
      tableData.length = 0,
      tableData.push(...res.data)
  })
}

const jump = (aa: any) => {

  $router.push({
    name: "/mpage/pinfo", query: {
      id: aa
    }
  });
}


// 分页
const limit = ref(2)
// 分页
const page = ref(1)
const currentpage = ref()

const changepage = (value: number) => {
  page.value = value
  currentpage.value = value
  service({
    url: "equipment",
    method: "get",
    params: {
      _page: currentpage.value,
      _limit: 2
    }
  }).then((res) => {
    // tableData.length = 0,
    // tableData.push(...res.data)
  })
}
</script>
<style>
.ant-layout {
  width: 100%;
  height: 100%;
}

.ant-layout-header {
  width: 100%;
  height: 30px;
  background-color: rgb(246, 247, 249);
}

.ant-layout-sider {
  width: 243px;
  margin-bottom: 20px;
  margin-right: 13px;
  background-color: white;
}

.ant-layout-content {
  background-color: white;
}

.ant-menu {
  height: 100%;
}

.ant-input {
  width: 384px;
}

.ant-space {
  display: flex;
}

.block {
  display: flex;
  text-align: center;
  margin-top: 10px;
}

.block .b1 {
  display: flex;
  width: 30%;
}

.block .b2 {
  width: 10%;
}

.sp {
  display: block;
  font-size: 12px;
  color: green;
  margin-top: 5px;
  margin-right: 10px;
}

.el-select {
  color: red;
  font-size: 12px;
}

.dpage {
  position: fixed;
  margin-top: 20px;
  right: 20px;
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.itemm {
  font-size: 25px;
  color: black;
  margin-bottom: 10px;
}

.tops {
  display: flex;
}

.tops .s1 {
  width: 30%;
}

.tops .s2 {
  width: 30%;
}

.tops .s3 {
  width: 30%;
}

.ant-input-affix-wrapper {
  width: 200px;
}
</style>